<template>
  <div>
    <div class="breadcrumb-container">
      <a-breadcrumb separator="|">
        <a-breadcrumb-item>
          <span style="cursor: pointer;" @click="onHistoryBack">
            <a-icon type="left" class="back" />
            <span class="breadcrumb-text back">返回项目列表</span>
          </span>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <span class="breadcrumb-text">{{ projectName }}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * header of auth management page
 * including breadcrumb and a button of adding members
 * @author Junjie Jin
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import ProjectStore from '@/store/modules/project'

@Component({})
export default class DetailsHeader extends Vue {
  @Prop() projectId!: number

  public get projectName(): string {
    if (this.projectId === null) {
      return '不存在的项目'
    }

    return ProjectStore.activeProject ? ProjectStore.activeProject.name : ''
  }

  public setAddMemberVisible(): void {
    ProjectStore.setAddMemberModalVisible(true)
  }

  public onHistoryBack() {
    this.$router.back()
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.breadcrumb-container {
  align-items: center;
  background: #fff;
  display: flex;
  flex-direction: row;
  height: 63px;
  justify-content: space-between;
}

// 标题分隔符
.ant-breadcrumb-separator {
  font-size: 18px;
}

.ant-breadcrumb {
  margin-left: 28px;
}

.breadcrumb-text {
  font-size: @TEXT_FONT_SIZE_BIG;
  font-weight: bold;
}

.back {
  color: @THEME_COLOR;
  color: #6973ff;
  margin-right: 8px;
  margin-top: 8px;
}

.add-button {
  border-radius: 4px;
  margin-right: 24px;
}
</style>
